<template>
	<view class="wrap">
		<view class="wrap__line">
			
		</view>
		<view class="wrap__main">
			<view class="main__item" @click="addClick">
				<image src="@/static/my/bank_icon.png" mode="widthFix" class="item__icon"></image>
				<view class="item__right">
					<text class="right__text">添加賬戶</text>
					<uni-icons type="right" color="#fff" size="20"></uni-icons>
				</view>
			</view>
			<view class="main__item" v-for="(item, index) in cardsList" :key="index">
				<image src="@/static/my/bank_icon.png" mode="widthFix" class="item__icon"></image>
				<view class="item__info">
					<view class="info__title">賬戶名稱</view>
					<view class="info__title">{{item.bank_name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				cardsList:[]
			}
		},
		onShow() {
			this.getUserBankCards()
		},
		methods:{
			// 获取已绑定银行卡列表
			async getUserBankCards(){
				let res = await this.$api.getUserBankCards()
				if(res.code === 1 && res.data){
					this.cardsList = res.data
				}
			},
			addClick(){
				uni.navigateTo({
					url:"/pages/account/addCards"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		&__line{
			width: 750rpx;
			height: 30rpx;
			background: #0E101F;
		}
		&__main{
			padding: 0 30rpx;
			box-sizing: border-box;
			.main__item{
				@include flexRowAlign();
				height: 120rpx;
				background: #161827;
				border-bottom: 1rpx solid #0E101F;
				.item__icon{
					width: 70rpx;
					height: 54rpx;
				}
				.item__right{
					@include flexRowAlign(space-between);
					flex: 1;
					margin-left: 30rpx;
					.right__text{
						font-size: 36rpx;
						font-weight: 800;
						color: #FFFFFF;
					}
				}
				.item__info{
					margin-left: 30rpx;
					.info__title{
						font-size: 26rpx;
						font-weight: 500;
						color: #FFFFFF;
						&:last-child{
							margin-top: 8rpx;
						}
					}
				}
			}
		}
	}
</style>